<template>
  <div class="tab1_wrap">
    <div class="table_main">
      <el-table
        class="jk_common_table001"
        :data="tableData"
        height="style"
        style="width: 100%"
      >
        <el-table-column
          prop="lv"
          label="等级"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="类别"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="desc"
          label="描述"
          align="center"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="defen"
          label="得分"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="table_caozuo_btns">
              <div class="table_caozuo_btn" @click="editTableItemFn(scope.row)">
                编辑
              </div>
              <div
                class="table_caozuo_btn"
                @click="removeTableItemFn(scope.row)"
              >
                删除
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="btns_wrap">
      <div class="btn_item">保存</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "2111",
          lv: "1",
          type: "灾难",
          desc: "维修成都维修成都维修成都维修成都维修成都",
          defen: "1",
        },
        {
          id: "2112",
          lv: "2",
          type: "严重",
          desc: "维修成都维修成都维修成都维修成都",
          defen: "2",
        },
        {
          id: "2113",
          lv: "3",
          type: "一般",
          desc: "维修成都维修成都维修成都维修成都",
          defen: "5",
        },
        {
          id: "2114",
          lv: "4",
          type: "轻微",
          desc: "维修成都维修成都维修成都维修成都",
          defen: "7",
        },
      ],
    };
  },
  methods: {
    editTableItemFn(item) {
      console.log(item);
    },
    removeTableItemFn(item) {
      console.log(item);
    },
  },
};
</script>
<style lang="scss" scoped>
.tab1_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .btns_wrap {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    .btn_item {
      cursor: pointer;
      width: 66px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      background: linear-gradient(to right, #20579f, #2788c0, #20579f);
      &:hover {
        opacity: 0.9;
      }
    }
  }
  .table_main {
    flex: 1 1 auto;
  }
}
.table_caozuo_btns {
  display: flex;
  align-items: center;
  justify-content: center;
  .table_caozuo_btn {
    margin-left: 10px;
    width: 36px;
    cursor: pointer;
    color: #387bb6;
    &:hover {
      text-decoration: underline;
    }
    &:first-child {
      margin-left: 0;
    }
  }
}
</style>
